<template>
  <div class="page-wrapper">
    <!-- 头部信息 -->
      <header>
        <div class="filter-part">
          <div class="filter-item">
            <label>药店：</label>
            <Select v-model="filterObj.hospitalId" :key="filterObj" filterable>
                <Option value="all" key="all">全部</Option>
                <Option v-for="item in hospitalList" :value="item.id" :key="item.id">{{ item.orgName }}</Option>
            </Select>
          </div>
          <div class="filter-item">
            <label>状态：</label>
            <Select v-model="filterObj.authStatus" :key="filterObj" filterable>
                <Option value="all" key="all">全部</Option>
                <Option v-for="item in authStatusList" :value="item.dictValue" :key="item.dictValue">{{ item.dictName }}</Option>
            </Select>
          </div>
          <div class="filter-item">					
            <DatePicker type="daterange" v-model="filterObj.time" placement="bottom-end" placeholder="申请日期" separator='至' class='hsix'></DatePicker>						
          </div>
          <div class="filter-btn-group">
            <Button style="width:51px;height:35px;" type="primary" class='hthree'  @click="handleSearch" icon="ios-search"></Button>
            <Button style="width:51px;height:35px;"  class='hthree' @click="handleReset">
              <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
            </Button>
          </div>
        </div>
      </header>
      <div class='hfive'>
        <Table border stripe :columns="columns" :data="dataSource"></Table>
        <!-- <tablePlus 
          :pagination="pagination"
          @on-change="onChange"
          :data="dataSource"
          :columns="columns"
          :loading="loading"
        /> -->
      </div>
      <!--分页器-->
      <div class="page">
          <Page :total="pagination.count" :current='pagination.pageNo' :page-size="pagination.pageSize" show-total show-elevator @on-change="onChange"/>
      </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import tablePlus from "@/components/tablePlus";
import Utils from '@/utils';
import { DatePicker } from "view-design";
const filterObj = {
  hospitalId: 'all',
  authStatus: 'all',
  time: null,
};
const pagination  ={
  pageNo: 1,
  pageSize: 10,
  count: 0
};
export default {
  components: {
    tablePlus,
    DatePicker
  },
  data() {
    const that = this;
    return {
      hospitalList: [],
      authStatusList: [
        // {dictName: '待审核', dictValue: 0},
        {dictName: '待审核', dictValue: 1},
        {dictName: '审核通过', dictValue: 2},
        {dictName: '审核不通过', dictValue: 3}
      ],
      filterObj: { ...filterObj },
      pagination: { ...pagination },
      dataSource: [],
      columns: [
        { type: 'sum', width: 80, align: 'center', title: '排序',
          render: (h, params) => {
              let sum = (this.pagination.pageNo-1)*this.pagination.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        { key: 'orderNo', title: '采购申请单号',align: 'center', },
        { key: 'hospitalName', title: '申请药店',align: 'center',},
        { key: 'createTime', title: '申请日期',align: 'center', },
        { key: 'status', title: '采购申请状态',align: 'center', render(h, params) {
          return (that.authStatusList.filter(item => item.dictValue == params.row.status)[0] || {}).dictName;
        } },
        { key: 'applyNum', title: '申请总数',align: 'center', },
        {
          key: '_opertate', title: '设置',align: 'center', render(h, params) {
            const { id, name, status  } = params.row;
            return h('div',[
              status == 1 ? h('Button', {
                  props: {
                      type: 'primary',
                      size: 'small'
                  },
                  style: {
                      margin: '0px 6px'
                  },
                  on: {
                      click: () => {
                        that.jumpTo('/index/drugfirmsmanage/procurement/purchaseApply/edit/' + id);
                      }
                  }
              }, '审核') :
              h('Button', {
                  props: {
                      type: 'primary',
                      size: 'small'
                  },
                  style: {
                      margin: '0px 6px'
                  },
                  on: {
                      click: () => {
                          that.jumpTo('/index/drugfirmsmanage/procurement/purchaseApply/review/' + id)
                      }
                  }
              }, '申请详情')
            ]);
          }
        }
      ],
      loading: false,
    }
  },
  created() {
    let breadList = [
        { path: "/index", title: "首页" },
        {
            path: "",
            title: "采购管理"
        },
        {
            path: "/index/drugfirmsmanage/procurement/purchaseApply/list",
            title: "采购申请审核"
        }
    ];
    this.$emit("changeBreadList", breadList);
    // 初始化筛选状态
    const { pagination, filterObj } = this.$route.query;
    pagination && (this.pagination = JSON.parse(decodeURIComponent(pagination)));
    filterObj && (this.filterObj = JSON.parse(decodeURIComponent(filterObj)));
  },
  mounted() {
    this.getMechanismreg();
    this.findPurchaseApplyListByPage();
  },
  methods: {
    handleSearch() {
      this.pagination.pageNo = 1;
      this.findPurchaseApplyListByPage();
    },
    handleReset() {
      this.filterObj = { ...filterObj };
      this.pagination = { ...pagination };
      this.findPurchaseApplyListByPage();
    },
    onChange(index) {
      this.pagination.pageNo = index
      this.findPurchaseApplyListByPage(this.pagination.pageNo);
    },
    addSupply() {
      this.jumpTo('/index/drugfirmsmanage/procurement/supplier/add');
    },
    jumpTo(path, query = {}) {
      this.$router.push({
        path,
        query: Object.assign({
          filterObj: encodeURIComponent(JSON.stringify(this.filterObj)),
          pagination: encodeURIComponent(JSON.stringify(this.pagination))
        }, query)
      });
    },
    findPurchaseApplyListByPage() {
      const reqBody = {
        ...this.filterObj,
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize
      };
      reqBody.hospitalId === 'all' && (delete reqBody.hospitalId);
      reqBody.authStatus === 'all' && (delete reqBody.authStatus);
      if(this.filterObj.time){
				reqBody.startTime = Utils.getNowDateBySpecialFormat(this.filterObj.time[0]);
				reqBody.endTime = Utils.getNowDateBySpecialFormat(this.filterObj.time[1]);
			}
      // reqBody.startTime = Utils.getNowDateBySpecialFormat(reqBody.startTime);
      // reqBody.endTime = Utils.getNowDateBySpecialFormat(reqBody.endTime);
      this.loading = true;
      this.$axios.post(api.getPurchaseAppPageList, reqBody).then(res => {
          if (res.data.code === 1) {
              const { records, total, current } = res.data.object;
              this.dataSource = records;
              this.pagination.count = total;
              if (!this.dataSource && (current !== 1)) {
                this.pagination.pageNo = this.pagination.pageNo - 1;
                this.findPurchaseApplyListByPage();
              }
          } else {
              this.$Message.error(res.data.message);
          }
          this.loading = false;
      });
    },

    getMechanismreg() {
      // let params = {
      //   pageNo: 1,
      //   pageSize: 9999,
      //   hospitalType:2,
      // };//机构注册列表
      // this.$axios.post(api.findKbaoHospitalRegisterDtoPage, params).then(res => {
      //   if (res.data.code) {
      //     this.hospitalList = res.data.object;
      //   } else {
      //     this.$Message.error(res.data.message);
      //   }
      // });
      this.$axios.post(api.mechanismregList, {pageNo: 1, pageSize: 9999, hospitalType: 2}).then(res => {
          if (res.data.code === 1) {
              this.hospitalList = res.data.object.records;
          }else {
            this.$Message.error(res.data.message);
          }
      });
    }
  }
}
</script>

<style scoped lang="less">
.hthree{width:75px;}
.hfive{padding: 10px 0 20px;}
.hsix{width:200px}
.filter-part {
  display: flex;
  flex-wrap: wrap;
  .filter-item {
    display: flex;
    margin: 10px 10px 10px 0;
    label {
      white-space: nowrap;
      line-height: 32px;
      padding-left: 5px;
      text-align: right;
    }
    .input {
      width: 220px;
    }
    .select {
      width: 70px;
    }
  }
  .filter-btn-group {
    margin: 10px 10px 10px 0;
    flex: 0 0 auto;
  }
}
.page-wrapper {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    margin: 0 auto;
}
.page{
      text-align: center;
      margin: 20px 0;
    }
</style>